<template>
	<scroll-view class="slider">


		<view v-for="(img, index) in images" :key="index" class="slide">

			<zero-lazy-load :key="index" :image="img" @click="previewImage(index)">
			</zero-lazy-load>
			<view class="page-indicator">
				{{ index + 1 }}/{{ images.length }}
			</view>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onLoad
	} from 'vue';
	import {
		onLoad as uniOnLoad
	} from '@dcloudio/uni-app';

	// 定义 images 响应式变量
	const images = ref([]);
	// 定义预加载后的图片路径数组
	const preloadedImages = ref([]);

	// 页面加载时获取传递过来的图片数组
	uniOnLoad((options) => {
		if (options.images) {
			const urls = JSON.parse(decodeURIComponent(options.images));
			images.value = urls.every(url => url.match(/page_(\d+)/)) ?
				urls.sort((a, b) => {
					const numA = parseInt(a.match(/page_(\d+)/)[1]);
					const numB = parseInt(b.match(/page_(\d+)/)[1]);
					return numA - numB;
				}) : urls; // 如果没有 page_x 格式，直接保持原始顺序

			console.log(images.value);
			// preloadImages();
		}
		console.log(images.value);
	});

	// 定义图片放大预览方法
	const previewImage = (currentIndex) => {
		console.log("sssssssssssssssss");
		uni.previewImage({
			current: currentIndex,
			urls: images.value,
			longPressActions: { // 新增长按配置
				itemList: [], // 设置为空数组禁用长按菜单
				success: () => {},
				fail: () => {}
			}
		});
	};

	const imgload = () => {
		console.log("nlsadfsdf");
	}
</script>

<style scoped>
	.slider {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.slide {
		position: relative;
		width: 100%;
		min-height: 50px;
		/* 父组件宽度100% */
		overflow: hidden;
	}

	.slide-image {
		width: 100%;
		/* 图片宽度与父组件一致 */
		height: auto;
		/* 根据宽度自动调整高度 */
		display: block;
	}

	.page-indicator {
		position: absolute;
		bottom: 8px;
		right: 8px;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		color: #fff;
		padding: 4px 8px;
		border-radius: 12px;
		font-size: 14px;
	}
</style>